import React, { useState, useEffect } from 'react'

// 需求：打开页面进行倒计时
export default function App() {
  const [count, setCount] = useState(10)
  // 依赖项写空数组，类似于 class componentDidMount
  useEffect(() => {
    setInterval(() => {
      // !行不通？
      // 产生了闭包
      console.log(count) // 永远是 10
      setCount(count - 1)
    }, 1000)
  }, [])
  return <div>{count}</div>
}

/* import React, { useState } from 'react'

export default function App() {
  const [count, setCount] = useState(10)
  const startTime = () => {
    setTimeout(() => {
      debugger
      // 一个函数中使用另一个函数中的变量，使用变量的地方称为产生了闭包现象，变量定义所在的函数称为闭包函数
      // 一旦点击了开启定时器，第一次外部的 count 一直被这个定义当中的 count 引用着
      console.log(count)
    }, 10000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 8)}>+8</button>
      <button onClick={startTime}>开启定时器</button>
    </div>
  )
} */
